<template>
  <div>
      <h1>x:{{x}}</h1>
      <h1>x:{{y}}</h1>
      <hr>
      <input type="text" v-model="txt"><button @click="toAdd">添加</button>
      <h1>未完成的任务：</h1>
      <ul class="list">
        <li v-for="item in noList" :key="item.id">
          <input @click="toChange(item.id)" type="checkbox" :checked="item.isCheck" >
          <span>{{item.id}}</span> 
          <a>{{item.txt}}</a>
          <button @click="toDel(item.id)">删除</button>
        </li>
      </ul>
      <h1>已完成的任务：</h1>
      <ul class="list">
        <li v-for="item in doneList" :key="item.id">
          <input @click="toChange(item.id)" type="checkbox" :checked="item.isCheck" >
          <span>{{item.id}}</span> 
          <a>{{item.txt}}</a>
          <button  @click="toDel(item.id)">删除</button>
        </li>
      </ul>
      <el-button type="primary">添加</el-button>
  </div>
</template>

<script >
import {getVeri,addReg} from '../../api/login.js'
import mouseHook from '../hooks/mouseHook.js'
import todoHook from '../hooks/todoHooks.js'

  export default {
      setup(){
        // 收集鼠标x,y位置的功能
          let {x,y}=mouseHook();
        // todolist的函数
        let {txt,toAdd,doneList,noList,toChange,toDel}=todoHook();

        // 获取验证码
        getVeri().then(res=>{
          console.log(res,"-----888-----")
        })
       
          return {
              x,
              y,
              txt,
              toAdd,
              doneList,
              noList,
              toChange,
              toDel
          }
      }
  }
</script>
<style lang="less">
    .list{
      width:1000px;
      li{
         width:1000px;
         display:flex;
         align-items:center;
         justify-content:space-around;
         font-size:20px;
         background:skyblue;
        margin-top:10px;
      }
    }
</style>